<!DOCTYPE html>
<html lang="en" class="no-js">

<!-- Head -->

<head>
  <!-- Meta data -->
  <meta charset="utf-8">
  <title>jsGantt Improved</title>
  <meta name="description" content="FREE javascript gantt - jsGantt Improved HTML, CSS and AJAX only">
  <meta name="keywords" content="jsgantt-improved free javascript gantt-chart html css ajax">
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- External resources -->
  <!-- jQuery + Ajax [required by Bootstrap] -->
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
    crossorigin="anonymous"></script>
  <!-- Required by smooth scrolling -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <!-- Bootstrap v4.0.0 Alpha -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
    crossorigin="anonymous" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
    crossorigin="anonymous"></script>
  <!-- Font Awesome -->
  <script src="https://use.fontawesome.com/78d1e57168.js"></script>
  <!-- Google's Code Prettify -->
  <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&amp;skin=sunburst"></script>
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Cookie|Satisfy|Kelly+Slab|Overlock" rel="stylesheet">

  <!-- jsGanttImproved App -->
  <link href="../jsgantt.css" rel="stylesheet" type="text/css" />
  <script src="../jsgantt.js" type="text/javascript"></script>
</head>

<!-- Content -->

<body data-spy="scroll" data-target="#my-navbar-nav">
  Choose a language: 
  <select onchange="start(event)">
    <option value='pt'>pt</option>
    <option value='en'>en</option>
    <option value='ru'>ru</option>
    <option value='es'>es</option>
    <option value='fr'>fr</option>
    <option value='de'>de</option>
  </select>

  <br/>
  <div id="embedded-Gantt">
    <script type="text/javascript">

      function start(e) {
        lang = e && e.target ? e.target.value : 'pt';
        var g = new JSGantt.GanttChart(document.getElementById('embedded-Gantt'), 'week');
        if (g.getDivId() != null) {
          g.setCaptionType('Complete');  // Set to Show Caption (None,Caption,Resource,Duration,Complete)
          g.setQuarterColWidth(36);
          g.setDateTaskDisplayFormat('day dd month yyyy'); // Shown in tool tip box
          g.setDayMajorDateDisplayFormat('mon yyyy - Week ww') // Set format to display dates in the "Major" header of the "Day" view
          g.setWeekMinorDateDisplayFormat('dd mon') // Set format to display dates in the "Minor" header of the "Week" view
          g.setShowTaskInfoLink(1); // Show link in tool tip (0/1)
          g.setShowEndWeekDate(0); // Show/Hide the date for the last day of the week in header for daily view (1/0)
          g.setUseSingleCell(10000); // Set the threshold at which we will only use one cell per table row (0 disables).  Helps with rendering performance for large charts.
          g.setFormatArr('Day', 'Week', 'Month', 'Quarter'); // Even with setUseSingleCell using Hour format on such a large chart can cause issues in some browsers
          // Parameters                     (pID, pName,                  pStart,       pEnd,        pStyle,         pLink (unused)  pMile, pRes,       pComp, pGroup, pParent, pOpen, pDepend, pCaption, pNotes, pGantt)
          g.AddTaskItem(new JSGantt.TaskItem(1, 'Define Chart API', '', '', 'ggroupblack', '', 0, 'Brian', 0, 1, 0, 1, '', '', 'Some Notes text', g));
          g.AddTaskItem(new JSGantt.TaskItem(11, 'Chart Object', '2017-02-20', '2017-02-20', 'gmilestone', '', 1, 'Shlomy', 100, 0, 1, 1, '', '', '', g));
          g.AddTaskItem(new JSGantt.TaskItem(12, 'Task Objects', '', '', 'ggroupblack', '', 0, 'Shlomy', 40, 1, 1, 1, '', '', '', g));
          g.AddTaskItem(new JSGantt.TaskItem(121, 'Constructor Proc #1234 of February 2017', '2017-02-21', '2017-03-09', 'gtaskblue', '', 0, 'Brian T.', 60, 0, 12, 1, '', '', '', g));
          g.AddTaskItem(new JSGantt.TaskItem(122, 'Task Variables', '2017-03-06', '2017-03-11', 'gtaskred', '', 0, 'Brian', 60, 0, 12, 1, 121, '', '', g));
          g.AddTaskItem(new JSGantt.TaskItem(123, 'Task by Minute/Hour', '2017-03-09', '2017-03-14 12:00', 'gtaskyellow', '', 0, 'Ilan', 60, 0, 12, 1, '', '', '', g));
          g.AddTaskItem(new JSGantt.TaskItem(124, 'Task Functions', '2017-03-09', '2017-03-29', 'gtaskred', '', 0, 'Anyone', 60, 0, 12, 1, '123SS', 'This is a caption', null, g));
          g.AddTaskItem(new JSGantt.TaskItem(2, 'Create HTML Shell', '2017-03-24', '2017-03-24', 'gtaskyellow', '', 0, 'Brian', 20, 0, 0, 1, 122, '', '', g));
          g.AddTaskItem(new JSGantt.TaskItem(3, 'Code Javascript', '', '', 'ggroupblack', '', 0, 'Brian', 0, 1, 0, 1, '', '', '', g));
          g.AddTaskItem(new JSGantt.TaskItem(31, 'Define Variables', '2017-02-25', '2017-03-17', 'gtaskpurple', '', 0, 'Brian', 30, 0, 3, 1, '', 'Caption 1', '', g));
          g.AddTaskItem(new JSGantt.TaskItem(32, 'Calculate Chart Size', '2017-03-15', '2017-03-24', 'gtaskgreen', '', 0, 'Shlomy', 40, 0, 3, 1, '', '', '', g));
          g.AddTaskItem(new JSGantt.TaskItem(33, 'Draw Task Items', '', '', 'ggroupblack', '', 0, 'Someone', 40, 2, 3, 1, '', '', '', g));
          g.AddTaskItem(new JSGantt.TaskItem(332, 'Task Label Table', '2017-03-06', '2017-03-09', 'gtaskblue', '', 0, 'Brian', 60, 0, 33, 1, '', '', '', g));
          g.AddTaskItem(new JSGantt.TaskItem(333, 'Task Scrolling Grid', '2017-03-11', '2017-03-20', 'gtaskblue', '', 0, 'Brian', 0, 0, 33, 1, '332', '', '', g));
          g.AddTaskItem(new JSGantt.TaskItem(34, 'Draw Task Bars', '', '', 'ggroupblack', '', 0, 'Anybody', 60, 1, 3, 0, '', '', '', g));
          g.AddTaskItem(new JSGantt.TaskItem(341, 'Loop each Task', '2017-03-26', '2017-04-11', 'gtaskred', '', 0, 'Brian', 60, 0, 34, 1, '', '', '', g));
          g.AddTaskItem(new JSGantt.TaskItem(342, 'Calculate Start/Stop', '2017-04-12', '2017-05-18', 'gtaskpink', '', 0, 'Brian', 60, 0, 34, 1, '', '', '', g));
          g.AddTaskItem(new JSGantt.TaskItem(343, 'Draw Task Div', '2017-05-13', '2017-05-17', 'gtaskred', '', 0, 'Brian', 60, 0, 34, 1, '', '', '', g));
          g.AddTaskItem(new JSGantt.TaskItem(344, 'Draw Completion Div', '2017-05-17', '2017-06-04', 'gtaskred', '', 0, 'Brian', 60, 0, 34, 1, "342,343", '', '', g));
          g.AddTaskItem(new JSGantt.TaskItem(35, 'Make Updates', '2017-07-17', '2017-09-04', 'gtaskpurple', '', 0, 'Brian', 30, 0, 3, 1, '333', '', '', g));
          g.setLang(lang);
          g.Draw();
        } else {
          alert("Error, unable to create Gantt Chart");
        }
      }

      start('pt')
    </script>
  </div>

</body>

</html>